<template>
	<view id="page">
		<nav-bar :navH="navH" :isTabar="false" :isHome="false" :pageName="title"></nav-bar>
		<!-- 评论区 -->
		<view class='comment'>
			<view class='cmt' v-for="(it, k1) in lists" :key="k1">
				<view class='head clearfloat'>
					<view class='col-9 i'>
						<image :src="it.user_img" mode='widthFix' lazy-load="true" class='col-2' @error="imgError(k1)"></image>
						<view class='col-10 io'><text style='color:#333;'>{{it.name}}</text><text style="font-size: 26upx;">{{it.create_time}}</text></view>
					</view>
					<view class='col-3 z'>
						<image src="../../static/19.png" mode="widthFix" lazy-load="true" style='margin-right:26upx;color:#666;' @click="jumpTextarea(it.id, it.user_id)"></image>
						<view style='display:inline-block' @click='setPlLike(k1, it.id)'>
							<image src="../../static/like_icon.png" mode='widthFix' v-if="it.is_zan"></image><image src="../../static/nolike_icon.png" mode='widthFix' v-else></image><text class="txt">{{it.zan}}</text>
						</view>
					</view>
				</view>
				<!-- 回复区 -->
				<view class='body'>
					<view class='cont'>{{it.content}}<block v-for="(it, k2) in it.ht_id" :key="k2" ><view class='topic'>#<text style="font-size: 24upx; color: #ef4d58;">{{it.topic_name}}</text>#</view></block></view>
					<view class='reply' v-if="it.son.length > 0">
					    <view class='section' v-for="(it, k3) in it.son" :key="k3">
							<view class='head clearfloat'>
							    <view class='col-9 i'>
									<image :src="it.hfimg" class='col-2' mode='widthFix' lazy-load="true" @error="imgError2(k1,k3)"></image>
									<view class='col-10 io'><text class='f'>{{it.hfname}}</text><text>{{it.reply_time}}</text></view>
							    </view>
							    <view class='col-3 z'>
									<image src="../../static/19.png" mode="widthFix" lazy-load="true" style='margin-right:26upx;color:#666;' @click="jumpTextarea(it.pl_id, it.hf_id)" v-if="it.grade == 1"></image>
									<view style='display:inline-block' @click='setPlLike2(k1, k3, it.pl_id)'>
									    <image src="../../static/like_icon.png" v-if="it.is_zan"></image><image src="../../static/nolike_icon.png" v-else></image><text class="txt">{{it.zan}}</text>
									</view>
							    </view>
							</view>
							<view class='body'>
							    <view class='cont'><block style='display:inline-block;margin-left:10upx;' v-if="it.grade == 2">回复<text style="font-size: 26upx; color: #4990e2;">@{{it.bhfname}}：</text></block>{{it.reply}}<block v-for="(it, k4) in it.ht_id" :key="k4"><navigator url="" class='topic'>#<text style="font-size: 26upx; color: #ef5c66;">{{it.topic_name}}</text>#</navigator></block></view>
							</view>
					    </view>
					    <view class='more' v-if="originLists[k1].son.length > it.son.length"><text @click='showMore(k1)'>查看更多</text></view>
					</view>
				</view>
		    </view>
			<!-- 评论/回复框 -->
			<comt-box :isTextarea="isTextarea" comType='reply' :zxId="zxId" :plId="plId" :bhfId="bhfId" @refresh="freshComments" @isText="close"></comt-box>
		</view>
		<view class="nomore" v-if="isLoad"><image src='../../static/nomore_img.png' mode="widthFix"></image><text>没有更多了~</text></view>
	</view>
</template>

<script>
	import ComtBox from '../../components/comtbox/index.vue'
	import app from '../../common/index.js'
	export default {
		data() {
			return {
				title: '评论',
				navH: null,
				userInfo: {},
				zxId: '',  // 资讯ID
				plId: '',  // 评论ID
				bhfId: '',  // 被回复ID
				hasRes: true,
				isLoad: false,
				page: 1,
				size: 10,
				originLists: [],
				lists: [],
				sons: [],  // 回复列表
				isTextarea: false,
				i: '',  // 当前评论index
				rs: 2,  // 当前son已展示了几条
			}
		},
		onLoad(options) {
			this.navH = this.$store.state.navHeight;
			this.zxId = options.id;
			// 获取本地用户信息
			this.userInfo = uni.getStorageSync('uinfo');
			this.getComments();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.originLists = [];
			this.lists = [];
			this.sons = [];
			// 获取本地用户信息
			this.userInfo = uni.getStorageSync('uinfo');
			this.getComments();
			uni.stopPullDownRefresh();
		},
		// 上划加载
		onReachBottom() {
			if(!this.isLoad) {
				this.page = this.page+1;
				this.getComments();
			}
		},
		components: {
			ComtBox,
		},
		methods: {
			/**
			 * @des 获取评论
			 */
			getComments() {
				app.request({
					url: 'entry/wxapp/ZxPlList',
					data: {
						zx_id: this.zxId,
						page: this.page,
						pagesize: this.size,
					}
				}, (ret) => {
					let d = ret.data, len = d.data.length;
					if (d.total > 0) {
						this.hasRes = true;
						this.originLists = this.originLists.concat(d.data);
						this.isLoad = len < this.size ? true : false;
						let tmpArr = [];
						d.data.forEach((item, index) => {
							tmpArr.push(JSON.parse(JSON.stringify(item)));
						})
						tmpArr.forEach(function(item, index) {
						  item.son.length > 0 && (tmpArr[index].son = item.son.slice(0, 2));
						})
						this.lists = tmpArr;
					} else {
						this.hasRes = false;
					}
				})
			},
			// 更多回复
			showMore(i) {
				if(i != this.i) {
					this.rs = 2;
					this.i = i;
				}
				this.rs += 2;
				this.lists[i].son = this.originLists[i].son.slice(0, this.rs);
			},
			/**
			 * @des 点赞评论内容
			 */
			setPlLike(i, plid) {
				console.log(plid)
				if(this.lists[i].is_zan === 1) {
					return;
				}else {
					app.request({
						url: 'entry/wxapp/PlLike',
						data: {
							zx_id: this.zxId,
							pl_id: plid,
							user_id: this.userInfo.id,
						}
					}, (ret) => {
						console.log(ret);
						this.lists[i].is_zan = 1;
						this.lists[i].zan += 1;
					})
				}
			},
			/**
			 * @des 点赞回复内容
			 */
			setPlLike2(i1, i2, plid) {
				if(this.lists[i1].son[i2].is_zan === 1) {
					return;
				}else {
					app.request({
					  url: 'entry/wxapp/PlLike',
					  data: {
						zx_id: this.zxId,
						pl_id: plid,
						user_id: this.userInfo.id,
					  }
					}, (ret) => {
						this.lists[i1].son[i2].is_zan = 1;
						this.lists[i1].son[i2].zan += 1;
					})
				}
			},
			/**
			 * @des 打开评论框
			 */
			jumpTextarea(plId, bhfId) {
				if(this.isTextarea) {
					this.isTextarea = false;
				}else {
					this.isTextarea = true;
					this.plId = plId;
					this.bhfId = bhfId;
				}
			},
			close() {
				this.isTextarea = false;
			},
			/**
			 * @des 刷新评论
			 */
			freshComments() {
				this.originLists = []; this.lists = [];
				uni.showLoading({title: ''});
				app.request({
					url: 'entry/wxapp/ZxPlList',
					data: {
						zx_id: this.zxId,
						page: this.page,
						pagesize: this.size,
					}
				}, (ret) => {
					let d = ret.data, len = d.data.length;
					if (d.total > 0) {
						this.hasRes = true;
						this.originLists = this.originLists.concat(d.data);
						this.isLoad = len < this.size ? true : false;
						let tmpArr = [];
						d.data.forEach((item, index) => {
							tmpArr.push(JSON.parse(JSON.stringify(item)));
						})
						tmpArr.forEach(function(item, index) {
						  item.son.length > 0 && (tmpArr[index].son = item.son.slice(0, 2));
						})
						this.lists = tmpArr;
					} else {
						this.hasRes = false;
					}
					uni.hideLoading();
				})
			},
			/**
			 * @des 处理图像错误
			 */
			imgError(k1) {
				let tmpComts = this.comts;
				tmpComts[k1].user_img = '../../static/avatars_default.png';
				this.comts = tmpComts;
			},
			imgError2(k1, k3) {
				let tmpComts = this.comts;
				tmpComts[k1].son[k3].user_img = '../../static/avatars_default.png';
				this.comts = tmpComts;
			}
		}
	}
</script>

<style>
	/** 评论区 **/
	/* .topic {background-color: transparent;} */

	.body .cont .topic {display: inline-block; margin-left: 10upx; color: #4990e2; word-break: normal; white-space: nowrap;}
	.reply .head .i image {}
	.reply .head .i .io .f {width:100%; color:#333;}
	.reply .head .i .io text {font-size: 24upx;}
	.reply .body {padding: 10upx 0 24upx; padding-left: 0;}
	.reply .body .cont {color: #666;}
	.reply .more {width: 100%; text-align: center;}
	.reply .more text {font-size: 26upx; color: #4990e2;}

	.cmt .body .cont {font-size: 26upx; color: #666;}
	.cmt .body .cont navigator {display: inline;}
	
	.nomore {padding-bottom: 0;}
</style>
